import './App.css';
import Header from './components/Header'
import Footer from './components/Footer'
import List from './components/List'
import {Component} from 'react'
export default class App extends Component{
  state = {
      todoList: [
          {id:1, check: true, name: '宝马'},
          {id:2, check: false, name: '奥拓'},
      ]
  }
  todoAddHandle = (prop)=>{
    let todoList = this.state.todoList;
    todoList.unshift({id:todoList.length+1,check:false,name: prop});
    this.setState({todoList: todoList})
  }
  todoCheck = (item,value)=>{
    console.log(item,value)
    let todoList = this.state.todoList;
    todoList.forEach(todo=>{
      if(todo.id == item.id){
        todo.check = value;
      }
    })
    this.setState({todoList})
  }
  todoCheckAll = (value) => {
    let todoList = this.state.todoList;
    todoList.forEach(item=>{
      item.check = value;
    })
    this.setState({todoList})
  }
  todoClear = ()=>{
    let todoList = this.state.todoList;
    todoList = todoList.filter(item=>{
      return !item.check;
    })
    this.setState({todoList})
  }
  render(){
    return (
      <div className="todo-container">
        <div className="todo-wrap">
        <Header  todoAddHandle={this.todoAddHandle}/>
        <List todoList={this.state.todoList} todoCheck={this.todoCheck}/>
        <Footer todoList={this.state.todoList} todoCheckAll={this.todoCheckAll} todoClear={this.todoClear}/>
        </div>
      </div>
    )
  }
}

